﻿import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    width: screenWidth
    height: screenHeight

    Item{
        id:backGround
        anchors.fill: parent
    }

    Rectangle{
        anchors.top: backGround.top
        anchors.topMargin: 200
        anchors.left: backGround.left
        anchors.leftMargin: 10
        color: "#0b49b0"
        border.width: 1
        border.color: "#008edd"
        width: 1060
        height: 1400

        Rectangle{
            id:warningShowBack
            width: 1058
            height: 1399
            z:10
            // border.width: 1
            clip: true

            ScrollBar{
                id:vbar
                z:10
                width: 30
                height: 100
                hoverEnabled: true
                active: hovered || pressed
                orientation: Qt.Vertical
                size: warningShowBack.height / warningMessageList.height
                anchors.top: parent.top
                anchors.topMargin: 80
                anchors.right: parent.right
                anchors.bottom: parent.bottom
            }


            Row{        // 列表标题
                z:10
                Repeater{
                    model:5
                    Rectangle{
                        width: index === 0 ? 200 : index === 1 ? 200 : index === 2 ? 300 : index === 3 ? 200 : 160
                        height: 80
                        border.width: 1
                        border.color: "white"
                        color: "black"

                        Text{
                            font.pixelSize: 30
                            anchors.centerIn: parent
                            color:"white"
                            text: index === 0 ? "日期" :
                                  index === 1 ? "时间" :
                                  index === 2 ? "报警描述" :
                                  index === 3 ? "结束时间" :
                                                "报警时长"

                        }
                    }
                }
            }
            Component{
                id:warningMassageItem

                Item{
                    width: 1060
                    height: 80


                    Rectangle{      // 开始日期
                        id:startData_Rec
                        width: 200
                        height: 80
                        border.width: 1
                        color: "transparent"
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.left

                        Text{
                            anchors.centerIn: parent
                            font.pixelSize: 30
                            font.bold: true
                            text:date
                        }

                    }
                    Rectangle{      // 开始时间
                        id:startTime_Rec
                        width: 200
                        height: 80
                        border.width: 1
                        color: "transparent"
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: startData_Rec.right

                        Text{
                            anchors.centerIn: parent
                            font.pixelSize: 30
                            font.bold: true
                            text:starttime
                        }
                    }
                    Rectangle{      // 报警描述
                        id:discription_Rec
                        width: 300
                        height: 80
                        border.width: 1
                        color: "transparent"
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: startTime_Rec.right

                        Text{
                            anchors.centerIn: parent
                            font.pixelSize: 30
                            font.bold: true
                            text:discription
                        }
                    }
                    Rectangle{      // 结束时间
                        id:endTime_Rec
                        width: 200
                        height: 80
                        border.width: 1
                        color: "transparent"
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: discription_Rec.right

                        Text{
                            anchors.centerIn: parent
                            font.pixelSize: 30
                            font.bold: true
                            text:endtime
                        }
                    }
                    Rectangle{      // 持续时间
                        id:durarionTime_Rec
                        width: 160
                        height: 80
                        border.width: 1
                        color: "transparent"
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: endTime_Rec.right

                        Text{
                            anchors.centerIn: parent
                            font.pixelSize: 30
                            font.bold: true
                            text:durationtime
                        }
                    }
                }
            }

            ListView{
                id:warningMessageList
                width: 1060
                height: warningMassageModel.count * 80
                y: 80 + (-vbar.position * height)
                // x:(-vbar.position * width)
                // highlight: Rectangle{color: "gold"}
                interactive: false

                model:ListModel{
                    id:warningMassageModel
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                    // ListElement{date:"2024-10-19";starttime:"15:20:38";discription:"刀盘上限位报警";endtime:"15:20:38";durationtime:"00:03:00"}
                }

                delegate: warningMassageItem
            }
        }


    }
    Rectangle{
        anchors.top: backGround.top
        anchors.topMargin: 1620
        anchors.right: backGround.right
        anchors.rightMargin: 10
        color: "#0b49b0"
        border.width: 1
        border.color: "#008edd"
        width: 430
        height: 150

        Rectangle{      // 清除报警信息
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 10
            width: 200
            height: 80
            radius: 10
            color: "#2b6ec5"

            Text{
                anchors.centerIn:parent
                font.pixelSize: 30
                font.bold: true
                color: "white"
                text:"清空报警信息"
            }

            MouseArea{
                anchors.fill: parent

                onPressed: {
                    parent.color = "#e44034"
                    warningMassageModel.clear()                    
                }

                onReleased: {
                    parent.color = "#2b6ec5"
                }
            }
        }

        Rectangle{      // 查看错误代码
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: 10
            width: 200
            height: 80
            radius: 10
            color: "#2b6ec5"

            Text{
                anchors.centerIn:parent
                font.pixelSize: 30
                font.bold: true
                color: "white"
                text:"查看错误代码"
            }

            MouseArea{
                anchors.fill: parent

                onPressed: {
                    parent.color = "#e44034"
                }

                onReleased: {
                    parent.color = "#2b6ec5"
                    Cpp_Connect.setQmlPage(7);
                    warningMassagePanel.visible = false
                    warningCorePanel.visible = true
                }
            }
        }
    }

    //接收历史报警信息，并解析数据
    Connections {
        target: Cpp_Connect
        function onSig_WarningHistoryDataChanged(vector) {
            warningMassageModel.clear();
            console.log("Data changed to:", vector.length)
            for (var i = vector.length-1; i >= 0; i--) {
                // console.log("startDate:", vector[i].startDate);
                // console.log("startTime:", vector[i].startTime);
                // console.log("discription:", vector[i].discription);
                // console.log("endTime:", vector[i].endTime);
                // console.log("durationtime:", vector[i].durationtime);
                warningMassageModel.append({date:vector[i].startDate,starttime:vector[i].startTime,discription:vector[i].discription,endtime:vector[i].endTime,durationtime:vector[i].durationtime});
            }
        }
    }
}
